<template>
	<view class="searchPage">

	<headerinfo></headerinfo>
		<!-- <u-navbar title="家庭日历" :placeholder="true" leftIconColor="#fff" :autoBack="true" :bgColor="bgColor"
			:titleStyle="titleStyle"></u-navbar> -->
		<!-- <zui-calendar :list="list" :datalists="datalists" :extraData="extraData" @click-active="clickActive"
			@changeDate="changeDate" @click-task="clickTask"></zui-calendar> -->
			<view class="width60">
				<view class="" style="padding: 30rpx;">
					<view class="" @click="rightClick" style="margin-bottom: 30rpx;">
						<el-button type="primary">新增</el-button>
					</view>
					<el-calendar v-model="value" @input="changecalendar">
						<template slot="dateCell" slot-scope="{ data }">
							<view style="font-size: 28rpx;">{{data.day}}</view>
							<view class="infoList">
								<view class="list" v-for="(item,index) in datalist"  :key="index" v-if="item.date == data.day">
				
									<view class="kdow" v-for="(item2,index2) in item.data" @click="edit(item2)" :key="index2">
										<p>{{item2.title}} <i class="iconfont" @click.stop="del(item2)"
													style="margin-left: 20rpx;"> &#xe718;</i></p>
										<p>{{item2.remark}}</p>
										<p>开始时间{{item2.startTime}} </p>
										<p><span v-if="item2.createName">创建人{{item2.createName}}</span> </p>	
									</view>
								</view>
							</view>
						</template>
					</el-calendar>
				</view>
			</view>
		


		<el-dialog :title="form.docId?'修改':'新增'" :visible.sync="dialogVisible" width="40%" top="5vh">

			<view class="form">
				<view class="list">
					<div class="form_label">
						<span class="red">*</span>
						事件名称
					</div>
					<input type="text" v-model="form.title" placeholder="请输入事件名称">
				</view>

				<view class="list">
					<div class="form_label">
						<span class="red">*</span>
						日期
					</div>
					<el-date-picker v-model="form.date" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
					</el-date-picker>
				</view>

				<view class="flexbox">
					<view class="list">
						<div class="form_label">
							<span class="red">*</span>
							开始时间
						</div>
						<el-time-picker
							value-format="HH:mm:ss"
						    v-model="form.startTime"
						    placeholder="选择时间">
						  </el-time-picker>
					</view>

					<view class="list">
						<div class="form_label">
							<span class="red">*</span>
							结束时间
						</div>
						<el-time-picker
							value-format="HH:mm:ss"
						    v-model="form.endTime"
						    placeholder="选择时间">
						  </el-time-picker>
					</view>
				</view>
				<view class="flexbox" v-if="!form.docId">
					<view class="list">
						<div class="form_label">
							家庭
						</div>
						<el-select @change="getFamUser" v-model="form.familyId" placeholder="请选择">
							<el-option v-for="item in familylist" :key="item.familyId" :label="item.label"
								:value="item.familyId">
							</el-option>
						</el-select>
					</view>

					<view class="list" v-if="!form.docId">
						<div class="form_label">
							家庭人物
						</div>

						<el-select multiple v-model="form.shareUsernames" placeholder="请选择">
							<el-option v-for="item in userList" :key="item.val" :label="item.name" :value="item.val">
							</el-option>
						</el-select>

					</view>
				</view>

				<view class="list">
					<div class="form_label">
						重复事件
					</div>
					<el-select v-model="form.repeat" placeholder="请选择">
						<el-option v-for="item in selectorList" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</view>
				<view class="list">
					<div class="form_label">详细内容</div>
					<textarea v-model="form.remark" placeholder="选填"></textarea>
				</view>
				<view class="btns" v-if="form.docId">
					<view class="createBtn" style="width: 100%;" @click="createFirstSubmit()">保存</view>
				</view>
				<view class="createBtn" v-else @click="createFirstSubmit()">创建</view>
			</view>

			<!-- 	<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</span> -->
		</el-dialog>


	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import headerinfo from '@/components/headerinfo'
	export default {
		components: {headerinfo},
		data() {
			return {
				familylist: [],
				userList: [],
				dialogVisible: false,
				value: new Date(),
				datalists: [],
				datalist: [],
				titleStyle: {
					color: '#fff'
				},
				bgColor: '#de4849',
				list: [],
				upDatakey: '', //为重新渲染DOM值，入不需要则可取消
				extraData: [{
					date: '2022-7-20',
					value: '签到',
					status: true,
					dot: true,
					active: false
				}, {
					date: '2022-7-19',
					value: '未签到',
					status: false,
					dot: true,
					active: true
				}],
				selectorList: [{
					name: "每天",
					id: "day"
				}, {
					name: "每月",
					id: "month"
				}, {
					name: "每年",
					id: "year"
				}],
				today: '',
				form: {
					date: '',
					docId: '',
					endTime: '',
					familyId: '',
					location: '',
					remark: '',
					repeat: '',
					shareUsernames: '',
					startTime: '',
					title: '',
				},
			};
		},

		onShow() {
			this.monthDate = dayjs().format('YYYY-MM')
			this.today = dayjs().format('YYYY-MM-DD')
			this.getData()

			this.getMyfamilyData()
		},
		methods: {
			rightClick() {
				this.form = {
					date: '',
					docId: '',
					endTime: '',
					familyId: '',
					location: '',
					remark: '',
					repeat: '',
					shareUsernames: '',
					startTime: '',
					title: '',
				}
				this.dialogVisible = true
			},
			getFamUser() {
				let data = {
					familyId: this.form.familyId
				}
				this.$api.queryFamilyMember(data).then(res => {
					console.log(res)

					let list = []

					if (res.list.length > 0) {
						res.list.forEach(item => {
							list.push({
								name: item.nickname,
								val: item.id,
								phone: item.phone,
								checked: false
							})
						})
					}


					this.userList = list

				})
			},
			del(item) {

				this.$confirm('是否确认删除该纪念日?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(() => {
					let data = {
						docId: item.docId,
						repeat: item.repeat
					}
					this.$api.calendardelete(data).then(res => {
						this.$message.success('删除成功');
						this.getData()
					})

				})
		},
		edit(item){
			this.dialogVisible = true
			this.form = item
			console.log(item)
			this.form.docId = item.docId
			
			
		},
		getMyfamilyData() {

			this.$api.myFamily().then(res => {
				let familylist = [];
				uni.setStorageSync('myFamilyIndexs', []);
				if (res.familyInfo) {
					for (let i in res.familyInfo) {
						familylist.push({
							familyId: i,
							family: res.familyInfo[i].family
						});
					}
					if (familylist.length > 0) {
						familylist.forEach((item, index) => {
							console.log(item);
							item.label = item.family.familyName;
							item.id = item.familyId;

						});
					}

					this.familylist = familylist
					console.log(this.familylist);
				}
			});
		},
		changecalendar(value) {
			this.monthDate = this.formatDateString(value);
			this.getData()
		},
		formatDateString(date) {
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			return `${year}-${month}`;
		},
		getData() {
			let data = {
				monthDate: this.monthDate
			}
			this.$api.getCalendarEventsByDate(data).then(res => {

				let listArr = []
				let arrs = []
				if (res) {
					for (let i in res) {
						listArr.push({
							date: i,
							data: res[i]
						});
						arrs.push(i)
					}
				}
				this.datalist = listArr
				this.datalists = arrs

				console.log(this.datalist)
				console.log(this.datalists)
				if (this.datalist.length > 0) {
					this.getToday()
				}

			})
		},
		getToday() {
			if (this.datalist.length > 0) {
				this.datalist.forEach(item => {
					if (item.date == this.today) {
						console.log(item.data)
						this.list = item.data
					}
				})
			}
		},
		// 点击任务方法
		clickTask({
			row,
			index
		}) {
			let data = JSON.stringify(row)
			uni.navigateTo({
				url: `/pages/calendar/add?data=${data}`
			})
		},
		changeDate(e) {
			console.log(e)
			this.list = []
			this.monthDate = e.date
			this.today = e.date + '-' + e.day
			this.getData()
		},
		clickActive({
			year,
			month,
			date,
			index
		}) {
			console.log(date)
			this.today = date
			this.getToday()
		},

		createFirstSubmit() {
			if (this.form.title == '') {
				this.$message.error('纪念日名称不能为空')
				return
			}

			if (this.form.date == '') {
				this.$message.error('日期不能为空')
				return
			}

			if (this.form.startTime == '') {
				this.$message.error('开始时间不能为空')
				return
			}

			this.$api.calendarupsert(this.form).then(res => {
				let str = '创建成功'
				if (this.form.docId) {
					str = '修改成功'
				}

				this.dialogVisible = false
				
				this.$message.success(str)

			});


		},

	}
	};
</script>

<style>
	page {
		background-color: #f9f9f9;
	}
</style>
<style lang="scss" scoped>
	
	.list{
		margin-bottom: 20rpx;
	}
	.kdow {
		font-size: 28rpx;
	}


	::v-deep .el-calendar-table .el-calendar-day {
		min-height: 85px !important;
		height: auto!important;
	}


	.form {
		padding: 20rpx;
		box-sizing: border-box;

		.btns {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.createBtn {
				width: 330rpx;
			}
		}

		.list {
			margin-bottom: 40rpx;
		}

		.form_label {
			margin-bottom: 10rpx;
			font-size: 28rpx;
		}

		.red {
			color: red;
		}

		input {
			border: 1px solid #eee;
			border-radius: 10rpx;
			padding: 0 20rpx;
			height: 80rpx;
			font-size: 30rpx;
			width: 100%;
		}

		textarea {
			border: 1px solid #eee;
			border-radius: 10rpx;
			padding: 20rpx;
			height: 300rpx;
			font-size: 30rpx;
			width: 100%;
		}

		.createBtn {
			width: 100%;
			height: 90rpx;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			justify-content: center;
			box-sizing: border-box;
			background-color: #de4849;
			color: #fff;
		}

	}

	.flexbox {
		display: flex;
		align-items: center;
		justify-content: space-between;

		&>view {
			width: 48%;
		}
	}
</style>